<template>
	<!-- 条件筛选 -->
	<u-sticky offset-top="0" :zIndex='2'>
		<view class="page-index">
			<view class="select-box">
				<view class="select-item" v-for="(item,index) in selectList" :key="index" @click="openPopup(item,index)">
					<view :class="[item.value=='区域'||item.value=='类型'||item.value=='价格'||item.value=='筛选'?'value':'valueSelect']">
						{{item.value}}
					</view>
					<image :src="item.selectUrl" mode="" style="width: 32rpx;height: 32rpx;"></image>
				</view>
			</view>
		</view>
		<!-- 筛选弹出层 -->
		<Popup ref="popups" />
	</u-sticky>
</template>

<script>
	import Popup from './popup/popup.vue'

	export default {
		components: {
			Popup
		},
		name: "select",
		data() {
			return {
				selectList: [{
						value: '区域',
						selectUrl: '../../static/home/select.png',
					},
					{
						value: '类型',
						selectUrl: '../../static/home/select.png',
					},
					{
						value: '价格',
						selectUrl: '../../static/home/select.png',
					},
					{
						value: '筛选',
						selectUrl: '../../static/home/select.png',
					}
				]
			};
		},
		created() {
			let that = this
			uni.$on('areass', function(data) {
				if (data == '不限' || '') {
					that.selectList[0].value = '区域'
				} else {
					that.selectList[0].value = data
				}
			})
			uni.$on('tentypes', function(data) {
				if (data == '不限' || '') {
					that.selectList[1].value = '类型'
				} else {
					that.selectList[1].value = data
				}
			})
			uni.$on('rents', function(data) {
				if (data == '不限' || '') {
					that.selectList[2].value = '价格'
				} else {
					that.selectList[2].value = data
				}
			})
			uni.$on('formSearch', function(data) {
				if (data.size_id[0] != 0 || data.configure_id[0] != 0) {
					that.selectList[3].value = '筛选 '
				} else {
					that.selectList[3].value = '筛选'
				}
			})
		},
		methods: {
			openPopup(item, index) {

				if (index == '0') {
					this.$refs.popups.regionOpen()
				} else if (index == '1') {
					this.$refs.popups.typeOpen()
				} else if (index == '2') {
					this.$refs.popups.rentOpen()
				} else {
					this.$refs.popups.screenOpen()
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-index {
		background: #fff;
		margin: 0 -32rpx;

		.select-box {
			height: 96rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.select-item {
				display: flex;
				height: 56rpx;
				justify-content: space-around;
				width: 172rpx;
				align-items: center;
				justify-content: center;
				border-right: 1rpx solid rgba(32, 32, 32, 0.08);

				.value {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					color: #202020;
				}

				.valueSelect {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					color: #006FD0;
				}
			}

			.select-item:last-child {
				border: none;
			}
		}
	}
</style>
